<template>
  <template v-if="files && files.length">
    <template v-for="f in files" :key="f.id">
      <!-- 类型1：图片 -->
      <el-image
        v-if="f.typeFlag == FILE_TYPE_CODE.IMAGE"
        :zoom-rate="1.2"
        :preview-src-list="imgUrls"
        class="attach-img mr10"
        :initial-index="f.imgIdx"
        :src="imgUrls[f.imgIdx]"
        :preview-teleported="true"
        :title="f.name"
        :style="{ width: props.width || '120px', height: props.height || '87px' }"
        fit="cover"
      >
        <template #placeholder>
          <div class="image-slot disf alc juc">
            Loading
            <span class="dot">...</span>
          </div>
        </template>
      </el-image>
      <!-- 类型2：视频 -->
      <!-- 
      <a
        v-else-if="f.typeFlag == FILE_TYPE_CODE.VIDEO"
        class="attach-img video mr10"
        :style="{
          width: props.width || '120px',
          height: props.height || '87px',
          cursor: 'pointer',
        }"
        :title="f.name"
        @click="openVideo(getVideoUrl(f.id))"
      ></a>
       -->
      <!-- 类型3：其他文件 -->
      <a
        v-else
        :href="getFileById(f.id)"
        class="attach-img file mr10"
        :style="{ width: props.width || '120px', height: props.height || '87px' }"
        :title="f.name"
      ></a>
    </template>
  </template>
  <span v-else>无</span>
  <!-- <VideoBox v-model:url="openVideoUrl" /> -->
</template>

<script lang="ts" setup>
import { FILE_TYPE_CODE, getFileExtension } from "@/utils/file";
// import VideoBox from "@/layout/components/live-chat/chat/components/video/index.vue";
import { Attachment } from "@/api/common/common";
import { cloneDeep } from "lodash-es";
import { getFileById, getVideoUrl } from "@/api/file.api";

const props = defineProps<{
  attachments?: Attachment[];
  width?: "auto";
  height?: "auto";
}>();

const files = ref<Attachment[]>([]); //所有附件（处理后的）
const imgUrls = ref<string[]>([]); //图片路径列表

//打开视频
const openVideoUrl = ref("");
const openVideo = (video: string) => {
  openVideoUrl.value = video;
};

// 监听文件变动
watch(
  () => props.attachments,
  (val) => {
    imgUrls.value = [];
    files.value =
      val?.map((file: Attachment) => {
        let nFile = cloneDeep(file);
        nFile.typeFlag = getFileExtension(nFile.name as string);
        if (nFile.typeFlag == FILE_TYPE_CODE.IMAGE) {
          nFile.imgIdx = imgUrls.value.length;
          imgUrls.value.push(getFileById(nFile.id));
        }
        return nFile;
      }) || [];
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss">
.attach-img {
  color: var(--theme-color-2);
  border-radius: 5px;
  &.file {
    display: inline-block;
    background:
      url("@/assets/images/file_common.png") no-repeat center,
      rgba(0, 0, 0, 0.4);
  }
  &.video {
    display: inline-block;
    background:
      url("@/assets/images/file_video.png") no-repeat center,
      rgba(0, 0, 0, 0.4);
  }
  &:hover {
    opacity: 0.8;
  }
}
.image-slot {
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
}
.mr10 {
  margin-right: 10px;
}
</style>
